<template>

  <div class="data">
    
    <ul class="data_main">
      <li class="flex">
        <p class="data_left">头像</p>
        <img class="data_img" :src="info.avatar">
      </li>
      <li class="flex">
        <p class="data_left">昵称</p>
        <p>{{info.nickname}}</p>
      </li>
      <li class="flex">
        <p class="data_left">姓名</p>
        <input v-model="name" placeholder="请输入您的真实姓名">
      </li>
      <li class="flex">
        <p class="data_left">手机号</p>
        <input v-model="phone" placeholder="请输入您的手机号">
      </li>
      <li class="flex">
        <p class="data_left">年龄</p>
        <input v-model="age">
      </li>
      <li class="flex">
        <p class="data_left">性别</p>
        <ul class="data_sex flex">
          <li>
            <label for="1">男</label>
            <input type="radio" id="1" value="1" v-model="sex">
          </li>
          <li>
            <label for="0">女</label>
            <input type="radio" id="0" value="0" v-model="sex">
          </li>
        </ul>
      </li>
    </ul>

    <!-- <button class="data_btn">保存</button> -->

  </div>

</template>


<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: 'dataInfo',
  data () {
    return {
      img: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=949383615,3755507436&fm=58',
      nickname: '青青草原',
      name: '',
      phone: '',
      age: '',
      sex: '',
      info: {},
    }
  },
  mounted(){
    this.getInfo();
    this.$root.share();
  },
  methods: {
    // 信息获取
    getInfo(){
      var that = this;
      axios.get(global.api.order.customer.user,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("信息获取 then");
        console.log(res);
        if (res.data.error == 0) {
          that.info = res.data.member;
        }
      })
      .catch(function(res){
        console.log("信息获取 catch");
        console.log(res);
      })
    },
  }
}
</script>

<style scoped>
  input{
    border: none;
    text-align: right;
  }
  input:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .data{

  }
  .data_main{
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  .data_main li{
    justify-content: space-between;
    align-items: center;
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid #B3B3B4;
    padding: 0 0.5rem;
  }
  .data_img{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
  }
  .data_btn{
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #2ecc80;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    margin: 2rem 0 1rem;
  }
</style>
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
</style>
